<template>
  <div class="lr-content">
    <div class="side-panel">
      <div class="side-title">
        <slot name="title">
          {{ props.title }}
        </slot>
        <slot name="title-search"> </slot>
      </div>
      <div class="side-search">
        <slot name="search"></slot>
      </div>
      <div class="side-content">
        <slot name="side-content"></slot>
      </div>
      <div v-show="isDrag" class="resize" title="收缩侧边栏"></div>
    </div>

    <div class="main-panel">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    title?: string;
    isDrag?: boolean;
  }>(),
  {
    title: "",
    isDrag: false,
  });


const { isDrag } = toRefs(props)
const dragControllerDiv = () => {
  let resize = document.getElementsByClassName("resize")[0];
  let left = document.getElementsByClassName("side-panel");
  let mid = document.getElementsByClassName('main-panel');
  let box = document.getElementsByClassName('lr-content');
  
  

  // // 鼠标按下事件
  resize.onmousedown = function (e) {
    
  //   //颜色改变提醒
    resize.style.borderColor = "#818181";
    let startX = e.clientX;
    resize.left = resize.offsetLeft;
  //   // 鼠标拖动事件
    document.onmousemove = function (e) {
      let endX = e.clientX;
      let moveLen = resize.left + (endX - startX); // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度
      
      let maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

      if (moveLen < 220) moveLen = 220; // 左边区域的最小宽度为32px
      if (moveLen > 500) moveLen = 500; // 左边区域的最大宽度为32px
      // if (moveLen > maxT - 500) moveLen = maxT - 500; //右边区域最小宽度为150px
      resize.style.left = moveLen; // 设置左侧区域的宽度
      for (let j = 0; j < left.length; j++) {
        left[j].style.width = moveLen + "px";
        mid[j].style.width = mid[j].style.width - moveLen + "px";
      }
    };
  //   // 鼠标松开事件
    document.onmouseup = function () {
      //颜色恢复
      resize.style.borderColor = "#e8e8e8";
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
    };
    resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
    return false;
  };
};

onBeforeMount(() => {
  nextTick(()=>{
    if(isDrag.value) {
      dragControllerDiv()
    }
    
  })
})
</script>

<style>
.all-content {
}
</style>

<style scoped lang="scss">
.lr-content {
  width: 100%;
  position: relative;
  display: flex;

  .side-panel {
    width: 220px;
    border-right: solid 1px #e8e8e8;
    min-height: calc(100vh - 140px);
    padding-right: 10px;
    position: relative;
    // top: 0;
    // left: 0;
    // bottom: 0;

    .side-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
    }

    .side-content {
      overflow: auto;
    }
  }

  .main-panel {
    overflow: hidden;
    padding-left: 30px;
    flex: 1;
    // padding-left: 270px;
  }
}
/*拖拽区div样式*/
.resize {
    cursor: col-resize;
    float: left;
    position: absolute;
    top: 0;
    right: -1px;
    background-color: rgba(255,255,255, 0);
    border-right: solid 1px #e8e8e8;
    border-radius: 5px;
    width: 3px;
    height: 100%;
    background-size: cover;
    background-position: center;
    /*z-index: 99999;*/
    font-size: 32px;
    color: white;
    }
     /*拖拽区鼠标悬停样式*/
     .resize:hover {
        color: #444444;
    }
</style>
